﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PopupChat.ascx.cs" Inherits="SonCa.SocialNetwork.Web.ASCX.PopupChat" %>

<script type="text/javascript">
    function MinimizePopupChat(obj) {
        var mini = $(obj).attr("class");
        var id = String(mini).substring(12, String(mini).length);        
        $("#minimizeActive" + id).hide();
        $(".number_popup" + id).css("height", "20px");
        $(".minimizechat" + id).hide();
        $(".maximizech" + id).show();
    }

    function MaximizePopupChat(obj) {
        var max = $(obj).attr("class");
        var id = String(max).substring(10, String(max).length);        
        $(".number_popup" + id).css("height", "297px");
        $("#minimizeActive" + id).show();
        $(".minimizechat" + id).show();
        $(".maximizech" + id).hide();
    }

    function ClosePopupChat(obj) {
        var popup = $(obj).attr("class");
        var id = String(popup).substring(9, String(popup).length);        
        $(".number_popup" + id).remove();
        if (Number(id) == accountChatList[0]) {
            $(".number_popup" + accountChatList[1]).animate({ "right": "-=210px" }, "slow");
            $(".number_popup" + accountChatList[2]).animate({ "right": "-=210px" }, "slow");
            $(".number_popup" + accountChatList[3]).animate({ "right": "-=210px" }, "slow");            
        }
        if (Number(id) == accountChatList[1]) {
            $(".number_popup" + accountChatList[2]).animate({ "right": "-=210px" }, "slow");
            $(".number_popup" + accountChatList[3]).animate({ "right": "-=210px" }, "slow");            
        }
        if (Number(id) == accountChatList[2]) {
            $(".number_popup" + accountChatList[3]).animate({ "right": "-=210px" }, "slow");            
        }
        if (position_right > 30) {
            position_right -= 210;
        }
        RemoveItem(accountChatList, id);
        num_popup -= 1;
    }

    function RemoveItem(array, item) {
        var index = array.indexOf(item);
        if (index != -1) {
            array.splice(index, 1);
        }
    }

    function TxtChatEnter(obj,e) {
        if (e.which == 13 || e.KeyCode == 13) {            
            var txt = $(obj).attr("class");
            var idChatTo = String(txt).substring(7, String(txt).length);
            SendMessageChat(idCurrent, idChatTo);
        }
    }

    function btnSendChatClick(obj) {
        var btn = $(obj).attr("class");
        var idChatTo = String(btn).substring(11, String(btn).length);
        SendMessageChat(idCurrent, idChatTo);
    }

    function SendMessageChat(idCurrent,idChatTo) {
        var mes = $(".txtChat" + idChatTo).val();
        if (mes.length == 0) {
            $(".txtChat" + idChatTo).focus();
            return;
        }
        var date = new Date();
        var mesTime = date.getHours() + ":" + date.getMinutes();        
        var content = "<div>" +
                        "<div style='float:left;margin-left:5px'>" +
                            "<a href='#'>" +
                                "<img width='24px' height='24px' src='../Images/ProfileAvatar/ProfileImage.aspx?AccountID=" + idCurrent + "'>" +
                            "</a>" +
                        "</div>" +
                        "<div class='message_chat' style='width:80%;margin-left:32px;min-height:20px' onmouseover='MouseOverMessageChat(this)' onmouseout='MouseOutMessageChat(this)'>" +
                            "<span style='padding-left:5px'>" + mes + "</span>" +
                            "<div style='float:right;font-size:10px;display:none'>" + mesTime + "</div>" +
                        "</div>" +
                        "<div style='clear:both'></div>" +
                    "</div>";
        var groupName = $(".number_popup" + idChatTo).attr("groupname");
        if (typeof groupName != "undefined" && groupName != false) {            
            chat.server.send(content, groupName);
        }
        $(".txtChat" + idChatTo).val("");
        $(".contentChat" + idChatTo).animate({ scrollTop: "500px" });
        // Save message chat        
        if (isOnlineChatTo == true) {
            SaveMessageChat(idCurrent, mes, idChatTo, true);
        }
        else if (isOnlineChatTo == false) {
            $('div[groupname=' + groupName + ']').find('#contentChat').append(content);
            SaveMessageChat(idCurrent, mes, idChatTo, false);
        }
    }

    function SaveMessageChat(accountIDSent, message, accountIDReceive, isRead) {
        $.ajax({
            type: "post",
            url: "../Services/AjaxService.svc/SaveMessageChat",
            data: '{"accountIDSent": "' + accountIDSent + '","message": "' + message + '","accountIDReceive": "' + accountIDReceive + '","is_read": "' + isRead + '"}',
            contentType: "application/json; charset=utf-8;",
            dataType: "json",
            success: function (response) {

            },
            error: function () { }
        });
    }

    function MouseOverMessageChat(obj) {
        $(obj).find('div').css('display','block');
    }

    function MouseOutMessageChat(obj) {
        $(obj).find('div').css('display', 'none');
    }
</script>

<div id="title_chat" style="background-color:#3074FF;color:White">
    <strong style="cursor:pointer" onclick="MaximizePopupChat(this)"></strong>
    <span><img src="../img/loading.gif" id="loadingchat" style="display:none" /></span>
    <span><img src="../img/close_chat.png" id="closePopupChat" style="float:right;cursor:pointer" onclick="ClosePopupChat(this)" /></span>
    <span><img src="../img/maximize.png" id="maximizePopupChat" style="float:right;cursor:pointer;display:none" onclick="MaximizePopupChat(this)" /></span>
    <span><img src="../img/minimize.png" id="minimizePopupChat" style="float:right;cursor:pointer" onclick="MinimizePopupChat(this)" /></span>    
</div>
<div>
    <div id="contentChat" style="width:100%;height:250px;overflow-y:scroll"></div>
    <div>    
        <input type="text" id="txtChat" style="width:158px" onkeypress="TxtChatEnter(this,event)" />
        <img src="../img/icon_blog.jpg" id="btnSendChat" width="24" height="24" style="cursor:pointer" onclick="btnSendChatClick(this)" />    
    </div>
</div>